import { defineComponent } from "vue";
import { ElRow, ElCol } from "element-plus";
import { RowColData } from "./interface";
import "./index.scss";

const RowCol = defineComponent({
	props: {
		data: {
			type: Array<RowColData>,
			default: () => {
				return [];
			}
		},
		// label宽度
		labelSpan: {
			type: Number,
			default: 12
		},
		// value宽度
		valueSpan: {
			type: Number,
			default: 12
		}
	},
	setup(props) {
		return () => {
			return (
				<ElRow class="rowCol-item">
					{props.data.map((e: RowColData) => {
						return (
							<>
								<ElCol class="title" span={props.labelSpan}>
									{e.label}
								</ElCol>
								<ElCol class="value" span={props.valueSpan}>
									{e.value}
								</ElCol>
							</>
						);
					})}
				</ElRow>
			);
		};
	}
});
export default RowCol;
